//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin image-helpers() {
    /* ==========================================================================
       Image

       Default Mendix image widgets
    ========================================================================== */

    img.img-rounded,
    .img-rounded img {
        border-radius: 6px;
    }

    img.img-thumbnail,
    .img-thumbnail img {
        display: inline-block;
        max-width: 100%;
        height: auto;
        padding: 4px;
        transition: all 0.2s ease-in-out;
        border: 1px solid $brand-default;
        border-radius: 4px;
        background-color: #ffffff;
        line-height: $line-height-base;
    }

    img.img-circle,
    .img-circle img {
        border-radius: 50%;
    }

    img.img-auto,
    .img-auto img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
    }

    img.img-center,
    .img-center img {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    img.img-icon {
        width: 20px;
        height: 20px;
        padding: 2px;
        border-radius: 50%;
    }

    img.img-fill,
    .img-fill img {
        object-fit: fill;
    }

    img.img-contain,
    .img-contain img {
        object-fit: contain;
    }

    img.img-cover,
    .img-cover img {
        object-fit: cover;
    }

    img.img-scale-down,
    .img-scale-down img {
        object-fit: scale-down;
    }

    .img-contain.mx-image-background {
        background-size: contain;
    }

    .img-cover.mx-image-background {
        background-size: cover;
    }

    .img-auto.mx-image-background {
        background-size: auto;
    }

    .img-opacity-low img,
    .img-opacity-low.mx-image-background {
        opacity: 0.3;
    }

    .img-opacity-medium img,
    .img-opacity-medium.mx-image-background {
        opacity: 0.5;
    }

    .img-opacity-high img,
    .img-opacity-high.mx-image-background {
        opacity: 0.7;
    }
}
